<template>
  <span style="width:90%;display:inline;">
    <el-tag
      :key="index"
      v-for="(tag, index) in tags"
      closable
      size="small"
      :disable-transitions="false"
      @close="handleClose(tag)"
      >{{ tag }}</el-tag
    >
    <span v-if="tags.length < 10">
      <el-input
        v-if="inputVisible"
        class="input-new-tag"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        maxlength="40"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput"
        >+标签</el-button
      >
    </span>
  </span>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    tags: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      inputVisible: false,
      inputValue: "",
    };
  },
  methods: {
    handleClose(tag) {
      console.log(tag, "1111");
      this.$confirm("此操作将永久删除该标签, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$emit("remove", { txt: tag, type: this.type });
      });
      // this.tags.splice(this.tags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.$emit("create", { txt: inputValue, type: this.type });
        // this.tags.push(inputValue);
      }
    },
    reset() {
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
};
</script>

<style scoped lang="scss">
.el-tag + .el-tag {
  margin-left: 10px;
  margin-bottom: 10px;
}
.button-new-tag {
  margin-left: 10px;
  line-height: 22px;
  padding-top: 0;
  padding-bottom: 0;
}
::v-deep .el-input__inner {
  height: 24px;
}
::v-deep .input-new-tag {
  width: 100px;
  height: 24px;
  margin-left: 10px;
  font-size: 12px;
  vertical-align: bottom;
}
</style>
